<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title></title>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@1.6/lib/index.css">
		<link rel="stylesheet" type="text/css" href="../../css/register.css"/>
	</head>
	<body>
		<div id="app">
			<header >
				<van-row>
					<van-col span="2" class="centers black">  
						<van-icon @click="returns" name="arrow-left"></van-icon>
					</van-col>
				  	<van-col span="22" class="centers black">
				  		忘记密码
				  	</van-col>
				</van-row>
			</header>
			<section>
				<van-row class="padding">
					<van-col span="24" class="centers padding">  
						<van-cell-group>
							<van-field
							    v-model.lazy="phone"
							    placeholder="请输入手机号"
							    :error-message="phoneMsg"/>
						</van-cell-group>
					</van-col>
				  	<van-col span="16" class="centers padding">  
				  		<van-cell-group>
				  			<van-field
							    v-model.lazy="verifi"
							    placeholder="6位数字短信验证码"
							    :error-message="verMsg"/>
				  		</van-cell-group>
					</van-col>
					<van-col span="8" class="centers">  
						<van-button type="danger" :disabled="dis" :text="val" @click="send"></van-button>
					</van-col>
					<van-col span="24" class="centers padding">  
						<van-cell-group>
							<van-field
							    v-model.lazy="pwd"
								right-icon="eye-o"
								:type="password"
								placeholder="新的登录密码(最少6位)"
								:error-message="pwdMsg"
								@click-right-icon="shows"/>
						</van-cell-group>
					</van-col>
					<van-col span="24" class="centers padding">  
						<van-cell-group>
							<van-field
							    v-model.lazy="pwds"
							    right-icon="eye-o"
							    :type="password1"
							    placeholder="确认密码(再次输入登录密码)"
							    :error-message="pwdsMsg"
							    @click-right-icon="shows1"/>
						</van-cell-group>
					</van-col>  
					<van-button size="large" type="danger" 
						@click="btn" 
						style="margin-top: 15px;">
						确认修改
					</van-button>
				</van-row>
			</section>
		</div>
		<script src="../../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/vant.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/ajax.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/fanhui.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/tuichu.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var app=new Vue({
				el:"#app",
				data:{
					password:"password",
					password1:"password",
					phoneMsg:"",
					verMsg:"",
					pwdMsg:"",
					pwdsMsg:"",
					phone:"",
					verifi:"",
					pwd:"",
					pwds:"",
					val:"获取验证码",
					dis:false,
				},
				methods:{
					shows:function(){
						this.password = this.password === 'password' ? 'text' : 'password';
					},
					shows1:function(){
						this.password1 = this.password1 === 'password' ? 'text' : 'password';
					},
					returns:function(){
						plus.webview.close(plus.webview.currentWebview(), "slide-out-left");
					},
					send:function(){
						var _this=this;
						ajax({
							url:"http://dsapi.ysd3g.com/API/SendForgotPasswordPhoneCode",
							dataType:"JSONP",
							data:{
								phone: _this.phone
							},	
							success:function(res){
								console.log(res)
								if(res.Error){
									app.$toast.fail(res.Msg);
								}
								else{
									_this.$dialog.confirm({
										title: '验证码',
										message: res.Code,
										confirmButtonText: '复制'
									}).then(() => {
										//复制
										app.verifi=res.Code;
										_this.getSecond(60);
									}).catch(() => {
										//取消
										_this.getSecond(60);
									});
								}
							}
						});
					},
					getSecond:function(time){
						let _this=this;
						let  _time= time;
						if (_time==0) {
							_this.dis=false;
							_this.val="获取验证码";
							time=_time;
						}else{
							_this.dis=true;
							_this.val=time+"s 后重试";
							time--;
							setTimeout(() => {
								_this.getSecond(time);
							}, 1000)
						}
					},
					btn:function(){
						var _this = this;
						ajax({
							url:"http://dsapi.ysd3g.com/api/ValidatePhone",
							dataType:"jsonp",
							data:{
								phone:_this.phone,
								phoneCode:_this.verifi
							},
							success(res){
								if (res.Error) {
									app.$toast.fail(res.Msg);
								} else{
									//app.$toast.success("验证手机成功");
								}
							}
						}),
						ajax({
							url: "http://dsapi.ysd3g.com/api/ResetPassword",
							dataType: "jsonp",
							data: {
								phone:_this.phone,
								password: _this.pwd
							},
							success(res) {
								if (res.Error) {
									app.$toast.fail(res.Msg);
								} else{
									app.$toast.success("修改成功");
									plus.webview.close(plus.webview.currentWebview(),"slide-out-left");
									plus.webview.open("login.html", "login");
								}
							}
						});
					}
				},
				watch:{
					phone(newPhone, oldPhone) {
						if(!(/^1[34578]\d{9}$/.test(newPhone))){
							this.phoneMsg="手机号格式错误";
						}else{
							this.phoneMsg="";
						}
					},
					verifi(newVer, oldVer) {
  						if(!(/^\d{6}$/.test(newVer))){
  							this.verMsg="验证码错误";
  						}else{
  							this.verMsg="";
  						}
					},
					pwd(newPwd, oldPwd) {
  						if(!(/^(\w){6,16}$/.test(newPwd))){
  							this.pwdMsg="密码必须在6-16位之间";
  						}else{
  							this.pwdMsg="";
  						}
					},
					pwds(newPwds, oldPwds) {
  						if(newPwds!=this.pwd){
  							this.pwdsMsg="两次密码不一致";
  						}else{
  							this.pwdsMsg="";
  						}
					},
  				}
			});
		</script>
	</body>
</html>